<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<!-- 组件 -->
		<div class="tip-box" id="tipBox" style="display: none;
		position: fixed;
		max-width: 200px;min-height: 60px;border-radius: 5px;
		border: 1px solid #CCCCCC;padding: 5px;">
			<div class="tip-header" style="line-height: 18px;height:20px;font-size: 16px;">提示</div>
			<div class="tip-body" id="tipBody" style="font-size: 12px;">
				Boolean类型，是否使用捕获，一般用false

				。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。
			</div>
		</div>


		<!-- dom -->
		<span tip-msg='原生js 实现对未来动态增加的元素进行事件绑定
使用原生js为动态创建的dom元素绑定事件'>鼠标悬停</span>
	</body>


	<script type="text/javascript">
		document.querySelector("*[tip-msg]").addEventListener('hover', function(e) {
			let _this = e.target;
			//显示tip组件
			document.getElementById("tipBox").style.display = "block";
			let tipBody = document.getElementById("tipBody");
			tipBody.innerHTML=e.target.getAttribute("tip-msg");
		})
	</script>
</html>
